$--color-primary: #1636ef;
$--color-default:#f0f2fa;
$--color-border-base:#DCDFE6;

.bg_primary{
    background-color:$--color-primary;
}
.bg_default{
    background-color: $--color-default;
}
.bg_white{
    background-color: white;
}
.bg_red{
    background: #F22A6C;
}
.bg_green{
    background: #00A68D;
}
.bg_yellow{
    background: #F69F00;
}




@function px2vh($px) {
    @return $px/1000*100vh;
}

.h_100{
    height: px2vh(100);
}
.h_100p{
    height: 100%;
}
.h_80{
    height: px2vh(80);
}
.h_60{
    height: px2vh(60);
}
.h_116{
    height: px2vh(116)
}
.h_166{
    height: px2vh(166);
}
.h_50{
    height: px2vh(50);
}
.h_250{
    height: px2vh(250);
}
.h_230{
    height: px2vh(230);
}
.h_350{
    height: px2vh(350);
}
.h_720{
    height: px2vh(715);
}
.h_150{
    height: px2vh(150);
}
.h_500{
    height: px2vh(500);
}

//width
.w_80{
    width: 80px;
}
.w_120{
    width: 120px;
}
.w_200{
    width: 200px;
}
.w_300{
    width: 300px;
}
.w_500{
    width: 50%;
}
.w_174{
    width: 195px;
}
.w_100p{
    width: 100%;
}
.w_24p{
    width: 24%;
}
.w_50p{
    width: 50%;
}

//padding
.p_10{
    padding: 10px;
}
.pb_0{
    padding-bottom:0 ;
}
.pb_10{
    padding-bottom:10px ;
}
.p_20{
    padding: 20px;
}
.p_24{
    padding: 24px;
}
.pt_30{
    padding-top: 30px;
}
.pt_0{
    padding-top: 0;
}
.pl_20{
    padding-left: 20px;
}
.pl_35{
    padding-left: 35px;
}
.pl_40{
    padding-left: 40px;
}
.p_lr_10{
    padding-left: 10px;
    padding-right: 10px;
}
.p_lr_20{
    padding-left: 20px;
    padding-right: 20px;
}




//margin
.m_10{
    margin: 10px;
}
.m_20{
    margin: 20px;
}
.mt_10{
    margin-top: 10px;
}
.mt_20{
    margin-top: 20px;
}
.mt_40{
    margin-top: 40px;
}
.mt_250{
    margin-top: 250px;
}
.ml_10{
    margin-left: 10px;
}
.ml_20{
    margin-left: 20px;
}
.m_tb_10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.m_tb_20{
    margin-top: 20px;
    margin-bottom: 20px;
}
.m_lr_10{
    margin-left: 10px;
    margin-right: 10px;
}
.m_lr_20{
    margin-left: 20px;
    margin-right: 20px;
}

.m_lr_30{
    margin-left: 30px;
    margin-right: 30px;
}
.mb_10{
    margin-bottom: 10px;
}
.mb_20{
    margin-bottom: 20px;
}
.mr_10{
    margin-right: 10px;
}
.mr_20{
    margin-right: 20px;
}
.mr_5{
    margin-right: 5px;
}
.mr_50{
    margin-right: 50px;
}
.mb_80{
    margin-bottom: 80px;
}
.mb_50{
    margin-bottom: 50px;
}
.ml_30{
    margin-left: 30px;
}
.mr_16{
    margin-right: 16px;
}

//text
.c_primary{
    color: $--color-primary;
}
.c_white{
    color: white;
}
.c_999{
    color: #999;
}
.c_black{
    color: black;
}
.c_danger{
    color: #a64545;
}
.c_333{
    color: #333333;
}
.c_aaa{
    color: #aaaaaa;
}
.c_yellow{
    color: #F99520;
}

//position
.po_r{
    position: relative;
}
.po_a{
    position: absolute!important;
}
.po_s{
    position: sticky;
    z-index: 3;
}

//font-size
.fz_30{
    font-size: 30px;
}
.fz_28{
    font-size: 28px;
}
.fz_18{
    font-size: 18px;
}
.fz_24{
    font-size: 24px;
}
.fz_22{
    font-size: 22px;
}
.fz_16{
    font-size: 16px;
}
.fz_32{
    font-size: 32px;
}
.fz_26{
    font-size: 26px;
}
.fz_14{
    font-size: 14px;
}
.fz_12{
    font-size: 12px;
}

//font-weight
.fw{
    font-weight: bold;
}


//line-height
.lh_36{
    line-height: 36px;
}
.lh_40{
    line-height: 40px;
}
.lh_30{
    line-height: 30px;
}
.lh_26{
    line-height: 26px;
}

//text-align
.ta_c{
    text-align: center;
}
.ta_r{
    text-align: right;
}
//border-radius
.br_4{
    border-radius: 4px;
}


//border
.bd{
    border: 1px solid $--color-border-base;
}
.bd_b{
    border-bottom: 1px solid $--color-border-base;
}
.bd_r{
    border-right: 1px solid $--color-border-base;
}

//flex
.flex_1{
    flex: 1;
}
.flex_2{
    flex: 2;
}
.flex_wrap{
    flex-wrap: wrap;
}
.flex_space{
    justify-content: space-around;
}

//cursor
.cur_p{
    cursor: pointer;
}

//over-flow
.of_h{
    overflow: hidden;
}
.of_y_a{
    overflow-x: hidden;
    overflow-y: auto;
}
.of_x_a{
    overflow-y: hidden;
    overflow-x: auto;
}

//circle
.circle{
    width: 26px;
    height: 26px;
    // line-height: 26px;
}
.text_over{
    white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
}
.hover:hover{
    color: $--color-primary;
    cursor: pointer;
}
.disabled{
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}